<template>
    <section class="search-condition">
    <div class="container-xl">
        <!--    课程类别-->
        <div class="classify">
            <div class="cation-middle">
                <dl class="cation-list">
                    <dt>课程方向</dt>
                    <dd class="course-where">
                        <a href="javascript:;" rel="" name="fc" class="all on">全部</a>
                        <a href="javascript:;" rel="htmlcss" name="fc" title="HTML/CSS" class="default " v-for="item in containerone" :key="item.id" @click="Level(item.id)">{{item.categoryName}}</a>
                    </dd>
                </dl>
                <dl class="cation-list">
                    <dt>课程分类</dt>
                    <dd class="course-category">
                        <a href="javascript:;" rel="" name="sc" class="all on">全部</a>
                        <a href="javascript:;" rel="mui" name="fc" title="mui" class="default" v-for="item in containertow" :key="item.id" @click="pagingtow(item.id)">{{item.courseName}}</a>
                    </dd>
                </dl>
                <dl class="cation-list">
                    <dt>课程难度</dt>
                    <dd class="course-level">
                        <a href="javascript:;" rel="" name="courseLevel" class="all on">全部</a>
                        <a href="javascript:;" rel="1" name="courseLevel" class="default" v-for="(item,index) in data" :key="index" @click="paging(item.age)">{{item.name}}</a>
                    </dd>
                </dl>
            </div>
        </div>
    </div>
    </section>
    
    <section>
        <div class="container-xl">  
            <!--课程展示-->
            <div class="course-top">
                <ul class="sortby">
                    <li class="item all active" name="sortBy" rel="">综合</li>
                    <li class="split">|</li>
                    <li class="item default " name="sortBy" rel="time-desc">最新课程</li>
                    <li class="split">|</li>
                    <li class="item default " name="sortBy" rel="purchase-desc">最多购买</li>
                    <li class="split">|</li>
                    <li class="item default " name="sortBy" rel="price-asc">
                        <span>价格</span>
                        <div class="price-up-down">
                            <i class="fa fa-caret-up" style=""></i>
                            <i class="fa fa-caret-down" style=""></i>
                        </div>
                    </li>
                </ul>
                <div class="right">
                    <div class="free default free-or-member " name="isFree" rel="1">
                        <div class="aaaaaaa"></div>
                        免费课程
                    </div>
                    <div class="member default free-or-member " name="isMember" rel="1">
                        <div class="aaaaaaa"></div>
                        会员课程
                    </div>
                </div>
            </div>
        </div>

        <div class="container-xl xl-main">
            <div class="course-content">
                <ul class="content-ul">
                    <li class="content-li" v-for="item in containercen" :key="item.id" @click="qwe(item.id,item.courseCover,item.courseName,item.purchaseCounter)">
                            <div class="li-img">
                                <a href="javascript:;" title="Vue2 + Nuxt2 + Vue3 + 项目">
                                    <img :src="item.courseCover" alt="Vue2 + Nuxt2 + Vue3 + 项目" title="Vue2 + Nuxt2 + Vue3 + 项目">
                                </a>
                            </div>
                            <div class="li-name">
                                <a href="javascript:;" title="Vue2 + Nuxt2 + Vue3 + 项目">{{item.courseName}}</a>
                            </div>
                            <div class="li-desc">
                                <span>{{courseType(item.courseLevel)}}</span>
                                {{item.purchaseCounter}}
                            </div>
                            <div class="li-sale-price">
                                <div>
                                    <span class="memberfree" v-if="item.isMember === 1">会员免费</span>
                                    <span class="memberprice">￥{{item.purchaseCounter}}</span>
                                </div>
                            </div>
                    </li>
                </ul>
            </div>
        </div>
        
        <div class="container-xl">
            <el-pagination background layout="prev, pager, next" :total="20" @current-change="pagingone"/>
        </div>
    </section>
</template>

<script>
import axios from 'axios'
import {onBeforeMount, reactive, ref} from 'vue'
import mixin from "@/mixin/mixin.js";
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'

export default {
    name:"HelloCourse",
    setup(){
        // 定义一个点击路由实体化
        //先在setup中定义
         const router = useRouter()

         const store = useStore()

        var qwe = function(i,x,y,z){
            let tadata = {id:i,image:x,name:y,size:false,age:z}
            store.commit('shopping',tadata)
            // console.log(store.state.data)
            router.push({name:'coursedetails',params: { id:i}})
        }
        let {courseType} = mixin();
        // 创建容器一级类
        let containerone = ref([]);

        // 创建二级容器
        let containertow = ref([]);

        // 创建数组变量
        let data = ref([
            {name:"初级",age:1},
            {name:"中级",age:2},
            {name:"高级",age:3}
        ])

        // 分页的容器
        let containercen = ref([]);

        // 分页函数
        var Pagination = function(i){
             axios
                .post("http://testapi.xuexiluxian.cn/api/course/mostNew", {
                    pageNum: i,
                    pageSize: 8,
                    entity:{
                        firstCategory:"",
                    }
                })
                .then((res) => {
                    containercen.value = res.data.data.pageInfo.list;
                });
        }

        // 生命周期
        onBeforeMount(()=>{
            // 一级接口
             axios
                .get(
                    "http://testapi.xuexiluxian.cn/api/course/category/getFirstCategorys"
                )
                .then((res) => {
                    containerone.value = res.data.data.list;
            });
             axios
                .post(`http://testapi.xuexiluxian.cn/api/course/search`, {
                    pageNum: 1,
                    pageSize: 10,
                    entity: {
                    firstCategory: "7ee944de2e56475781ec52e2b9ff6e5a",
                    secondCategory: "",
                    tags: "",
                    isMember: "",
                    isFree: "",
                    courseLevel: "",
                    sortBy: "",
                    },
                })
                .then((res) => {
                   containertow.value = res.data.data.pageInfo.list
                });

            // 中间接口函数
            Pagination(1);
        })

        var pagingone = (val) => {
            Pagination(val)
        }

        // 定义一个一级类事件
        var Level = (id) => {
            axios.post(`http://testapi.xuexiluxian.cn/api/course/search`, {
                pageNum: 1,
                pageSize: 10,
                entity: {
                firstCategory: id,
                secondCategory: "",
                tags: "",
                isMember: "",
                isFree: "",
                courseLevel: "",
                sortBy: "",
                },
            })
            .then((res) => {
                containertow.value = res.data.data.pageInfo.list
            });

            axios
            .post("http://testapi.xuexiluxian.cn/api/course/mostNew", {
                pageNum: 1,
                pageSize: 8,
                entity:{
                    firstCategory:id,
                }
            })          
            .then((res) => {
                containercen.value = res.data.data.pageInfo.list;
            });
        }

        // 分页的函数
        var paging = (n) => {
             axios
                .post("http://testapi.xuexiluxian.cn/api/course/mostNew", {
                    pageNum: 1,
                    pageSize: 8,
                    entity:{
                        courseLevel:n
                    }
                })
                .then((res) => {
                    containercen.value = res.data.data.pageInfo.list;
                });
        }

        // let qwe = ref([])

        // 分页的函数二
        var pagingtow = (id) => {
        }

        return{
            containerone,
            containertow,
            data,
            Pagination,
            containercen,
            pagingone,
            courseType,
            Level,
            paging,
            pagingtow,
            router,
            qwe,
            store
        }
    }
}
</script>

<style scoped>
.search-condition {
    background: #f3f5f9;
    padding: 30px 0;
}
.container-xl {
    padding: 0 0;

}
.classify {
    width: 1140px;
    margin: auto;
    background: #f3f5f9;
    border-radius: 8px;
    padding: 10px;
}
.cation-middle {
    line-height: 48px;
    font-size: 14px;
    margin: auto;
}
.cation-list {
    overflow: hidden;
}
.cation-list dt {
    float: left;
    width: 90px;
    font-weight: 700;
    line-height: 48px;
    position: relative;
    color: #333;
}
.cation-list dd {
    border-bottom: 1px dotted #e0e0e0;
    margin-left: 64px;
    overflow: hidden;
}
.cation-middle {
    line-height: 48px;
    font-size: 14px;
}
.cation-list dd a.on, .cation-list a:hover {
    color: #388fff;
    text-decoration: none;
    background: rgba(44,128,255,.1);
    border-radius: 5px;
}
.cation-list dd a {
    color: #515759;
    font-size: 14px;
    line-height: 25px;
    height: 25px;
    float: left;
    padding: 0 10px;
    margin: 10px 5px;
}
a {
    color: #333333;
    text-decoration: none;
}
a {
    color: #007bff;
    text-decoration: none;
    background-color: transparent;
}

.container-xl {
    padding: 0 0;
}

.xl-main {
    margin-top: 20px;
    min-height: 400px;
}

.container-xl {
    padding: 0 0;
}

.course-content[data-v-6f440509] {
    width: 1140px;
    min-height: 275px;
    margin-top: 20px;
    display: flex;
    margin: auto;
}

.content-li[data-v-6f440509] {
    position: relative;
    width: 265px;
    height: 275px;
    margin-right: 20px;
    /* background: palevioletred; */
    margin-bottom: 20px;
    box-shadow: 1px 1px 10px rgb(27 39 94 / 40%);
    border-radius: 8px;
    transition: margin-top 0.2s;
    -webkit-transition: margin-top 0.2s;
    overflow: hidden;
}
.container, .container-fluid, .container-sm, .container-md, .container-lg, .container-xl {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.course-top {
    display: flex;
    justify-content: space-between;
}

.course-top .sortby {
    display: flex;
    padding: 20px 0 0 0;
    font-size: 14px;
    color: #515759;
}
ul, li {
    list-style: none;
}
body, h1, h2, h3, h4, h5, h6, hr, p, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td {
    margin: 0;
    padding: 0;
}
ol, ul, dl {
    margin-top: 0;
    margin-bottom: 1rem;
}
*, *::before, *::after {
    box-sizing: border-box;
}
user agent stylesheet
ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
}

.course-top .right {
    display: flex;
    padding: 20px 0 0 0;
    font-size: 14px;
    color: #515759;
    text-align: center;
}
.course-top[data-v-6f440509] {
    display: flex;
    justify-content: space-between;
    justify-content: space-around;
}
*, *::before, *::after {
    box-sizing: border-box;
}
.course-top .sortby li {
    padding: 0 10px;
    cursor: pointer;
}
.course-top .active {
    color: #388fff;
}
.active {
    color: #388fff;
}
ul, li {
    list-style: none;
}
body, h1, h2, h3, h4, h5, h6, hr, p, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td {
    margin: 0;
    padding: 0;
}
*, *::before, *::after {
    box-sizing: border-box;
}
.container-xl{
    display: flex;
    justify-content: space-around;
    padding: 30px;
}
user agent stylesheet
li {
    display: list-item;
    text-align: -webkit-match-parent;
}
.memberfree {
    width: 80px;
    padding: 2px 10px;
    height: 20px;
    color: #fff;
    font-size: 12px;
    background: linear-gradient(
90deg
,#ff928e,#fe7062 99%);
    border-radius: 24px 0 24px 0;
}
.course-top .sortby {
    display: flex;
    padding: 20px 0 0 0;
    font-size: 14px;
    color: #515759;
}
user agent stylesheet
ul {
    list-style-type: disc;
}

.course-content {
    width: 100%;
    min-height: 275px;
    margin-top: 20px;
    display: flex;
}
*, *::before, *::after {
    box-sizing: border-box;
}

.content-ul {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
}
ul, li {
    list-style: none;
}
body, h1, h2, h3, h4, h5, h6, hr, p, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td {
    margin: 0;
    padding: 0;
}
ol, ul, dl {
    margin-top: 0;
    margin-bottom: 1rem;
}
.content-li:hover{
    margin-top: -15px;
}
*, *::before, *::after {
    box-sizing: border-box;
}
user agent stylesheet
ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
}
.content-li {
    position: relative;
    width: 270px;
    height: 275px;
    margin-right: 20px;
    /* background: palevioletred; */
    margin-bottom: 20px;
    box-shadow: 1px 1px 10px rgb(27 39 94 / 40%);
    border-radius: 8px;
    transition: margin-top 0.2s;
    -webkit-transition: margin-top 0.2s;
    overflow: hidden;
}
ul, li {
    list-style: none;
}
body, h1, h2, h3, h4, h5, h6, hr, p, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td {
    margin: 0;
    padding: 0;
}
*, *::before, *::after {
    box-sizing: border-box;
}
user agent stylesheet
li {
    display: list-item;
    text-align: -webkit-match-parent;
}
user agent stylesheet
ul {
    list-style-type: disc;
}

.content-li .li-img {
    width: 100%;
    height: 165px;
}
*, *::before, *::after {
    box-sizing: border-box;
}
user agent stylesheet
div {
    display: block;
}
ul, li {
    list-style: none;
}
user agent stylesheet
li {
    text-align: -webkit-match-parent;
}
user agent stylesheet
ul {
    list-style-type: disc;
}
.li-vip-img {
    position: absolute;
    top: 5px;
    right: 10px;
}
.li-name {
    font-size: 16px;
    font-weight: 700;
    margin: 10px 10px 0 10px;
}
.li-name, .li-desc {
    position: relative;
    color: #808080;
}
.li-desc {
    font-size: 12px;
    margin: 10px 0 0 10px;
}
.li-name, .li-desc {
    position: relative;
    color: #808080;
}
.li-sale-price {
    font-size: 14px;
    margin: 10px 0 0 10px;
}
.content-li .li-img img {
    width: 100%;
    height: 100%;
}
img {
    vertical-align: middle;
    border-style: none;
}
a {
    color: #333333;
    text-decoration: none;
}
memberfree {
    /* width: 80px; */
    padding: 2px 10px;
    height: 20px;
    color: #fff;
    font-size: 12px;
    background: linear-gradient(
90deg
,#ff928e,#fe7062 99%);
    border-radius: 24px 0 24px 0;
}
.li-sale-price {
    font-size: 14px;
    margin: 10px 0 0 10px;
}
</style>

